import { Chart } from '@antv/g2'
function chartsOne() {
  const data = [
    { time: '0:00', value: 20, type: '消耗' },
    { time: '1:00', value: 20 },
    { time: '2:00', value: 20 },
    { time: '3:00', value: 30 },
    { time: '4:00', value: 20 },
    { time: '5:00', value: 50 },
    { time: '6:00', value: 30 },
    { time: '7:00', value: 20 },
  ]
  // Step 1: 创建 Chart 对象
  const chart = new Chart({
    container: 'c1',
    autoFit: true,
    height: 350,
  })
  // Step 2: 载入数据源
  chart.data(data)
  chart.legend({
    position: 'top',
  })
  chart.scale('value', {
    alias: '消耗',
    nice: true,
  })

  chart.axis('time', {
    tickLine: null,
  })
  chart.tooltip({
    shared: true,
    showMarkers: false,
  })

  chart.interaction('active-region')
  chart
    .interval()
    .position('time*value')
    .style('time', (val) => {
      if (val === '13:00-14:00') {
        return {
          fillOpacity: 0.4,
          lineWidth: 1,
          stroke: '#636363',
          lineDash: [3, 2],
        }
      }
      return {
        fillOpacity: 1,
        lineWidth: 0,
        stroke: '#636363',
        lineDash: [3, 2],
      }
    })

  chart.render()
}

function chartsTwo() {
  const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ]
  const chart = new Chart({
    container: 'c2',
    autoFit: true,
    height: 500,
  })

  chart.data(data)
  chart.scale({
    year: {
      range: [0, 1],
    },
    value: {
      min: 0,
      nice: true,
    },
  })

  chart.tooltip({
    showCrosshairs: true, // 展示 Tooltip 辅助线
    shared: true,
  })

  chart
    .line()
    .position('year*value')
    .label('value')
  chart.point().position('year*value')

  chart.render()
}
export { chartsOne, chartsTwo }
